<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../avalon1.5/avalon.js"></script>
    <script>
        var vm = avalon.define({
            $id: "test",
            aaa: {
                xxx: "444",
                yyy: "555"
            },
            bbb: "yyy",
            zzz: "text",
            duplexChanged: function (data) {
                vm.zzz = data + ",";
                console.log("duplex-changed");
            }, listenzzz: function () {
                console.log(vm.zzz);
            },
            testCheckbox: ["1", "2"],
            hasCheckAll: false,
            listenCheckBoxChange: function () {
                if (vm.testCheckbox.length == 3) {
                    vm.hasCheckAll = true;
                } else {
                    vm.hasCheckAll = false;
                }
            },
            checkAll: function () {
                if (vm.testCheckbox.length == 3) {
                    vm.testCheckbox.clear();
                } else {
                    vm.testCheckbox.clear();
                    vm.testCheckbox.pushArray(["1", "2", "3"]);
                }
            },

            testRadio: false,
            testGroupRadio: "1",

            testSelect:["3"],
        })
    </script>
</head>
<body ms-controller="test">
<input ms-duplex="aaa['xxx']" data-duplex-changed="duplexChanged"><br/>
<input ms-duplex="aaa[bbb]"><br/>
<input ms-duplex="zzz" data-duplex-observe="false" data-duplex-changed="listenzzz"/>
<p>{{aaa.xxx}}</p>
<p>{{aaa.yyy}}</p>
<p>{{zzz}}</p>

<!--checkbox双工绑定-->
<input type="checkbox" id="all" value="all" ms-duplex-radio="hasCheckAll" ms-click="checkAll">全选
<input type="checkbox" name="hi" value="1" ms-duplex="testCheckbox" data-duplex-changed="listenCheckBoxChange">1
<input type="checkbox" name="hi" value="2" ms-duplex="testCheckbox" data-duplex-changed="listenCheckBoxChange">2
<input type="checkbox" name="hi" value="3" ms-duplex="testCheckbox" data-duplex-changed="listenCheckBoxChange">3

<!--radio-->
<br>
<input type="radio" ms-duplex="testRadio">单选

<!--二选一-->
<br>
<input type="radio" ms-duplex-text="testGroupRadio" value="1">单选1
<input type="radio" ms-duplex-text="testGroupRadio" value="2">单选2

<!--selected-->
<br>
<select name="hi" ms-duplex="testSelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
</body>
</html>